<template>
  <div>
    <el-card class="tree-card">
      <!-- 用了一个行列布局 -->
      <trrr-tools :obj="altScop" :is-rood="true" @add-dapt="addDapt" />
      <el-tree :data="treeData" :props="defaultProps">
        <trrr-tools
          slot-scope="{ data }"
          :obj="data"
          @add-dapt="addDapt"
          @edit-dapt="editDapt"
        />
      </el-tree>
    </el-card>

    <!-- 弹出层 -->
    <addDeps
      ref="deptsgetDeptsInfo"
      v-model="dialogVisible"
      :node-name="treeNode"
      @on-success="appDepartments"
      @edit-success="appDepartments"
    />
  </div>
</template>

<script>
import trrrTools from './components/trrrTools'
import addDeps from './components/add-deps'
import { getdepartments } from '@/api/departments.js'
import { transLisToTree } from '@/utils'
export default {
  components: {
    trrrTools,
    addDeps
  },
  data() {
    return {
      treeData: [

      ],
      defaultProps: {
        label: 'name'
      },
      altScop: {
        name: '权智播客',
        manager: '负责人',
        id: ''
      },
      dialogVisible: false,
      treeNode: {}
    }
  },

  created() {
    this.appDepartments()
  },

  methods: {
    async appDepartments() {
      const res = await getdepartments()
      console.log(res)
      this.treeData = transLisToTree(res.depts, '')
    },
    // 获取添加部门子组件传过来的数据
    addDapt(obj) {
      this.dialogVisible = true
      this.treeNode = obj
      console.log(obj)
    },
    // 获取点击查看部门当前最新数据
    editDapt(obj) {
      this.dialogVisible = true
      this.$refs.deptsgetDeptsInfo.getDeptsInfo(obj.id)
      this.treeNode = obj
      console.log(obj)
    }
  }
}
</script>

<style scoped lang='less'>

</style>
